<template>
  <div >
      <el-table
    :data="userInfo"
    >
    <el-table-column
      fixed
      prop="uid"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="uname"
      label="姓名"
      width="180">
    </el-table-column>
     <el-table-column
      prop="Attention"
      label="关注"
      width="180">
    </el-table-column>
     <el-table-column
      prop="fans"
      label="粉丝"
      width="150">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <!-- 新增按钮 -->
        <el-button
        @click="addDialog"
        type="warning" icon="el-icon-circle-plus-outline" circle></el-button>
        <!--修改按钮  -->
        <el-button
        @click="showEditDialog(scope.row.uid)"
        type="primary" icon="el-icon-edit" circle></el-button>
        <!-- 删除按钮 -->
        <el-button 
        @click="deleteRow(scope.row.uid)" 
        type="danger" 
        icon="el-icon-delete" circle></el-button>
      </template>
    </el-table-column>
      </el-table>
  
 

<!-- 修改用户的对话框-->
  <el-dialog  title="编辑用户信息" :visible.sync="editDialogVisible" width="80%"
@close="editDialogClosed">
          <el-form 
    ref="editFormRef"
    style="width:500px"
    :model="editForm" 
    :rules="editFormRules"
    label-width="100px">
      <el-form-item label="用户名" prop="uname">
        <el-input v-model="editForm.uname" />
      </el-form-item>
      <el-form-item label="密码" prop="upwd">
        <el-input v-model="editForm.upwd" show-password/>
      </el-form-item>
</el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </span>
        </el-dialog>

        <!--新增用户的对话框  -->
     <el-dialog  title="新增用户信息" :visible.sync="addDialogVisible" width="80%"
@close="addDialogClosed">
          <el-form 
    ref="addFormRef"
    style="width:500px"
    :model="addForm" 
    :rules="editFormRules"
    label-width="100px">
      <el-form-item label="用户名" prop="uname">
        <el-input v-model="addForm.uname" />
      </el-form-item>
      <el-form-item label="密码" prop="upwd">
        <el-input v-model="addForm.upwd" show-password/>
      </el-form-item>
      <el-form-item label="关注" prop="Attention">
        <el-input v-model="addForm.Attention" />
      </el-form-item>
      <el-form-item label="粉丝" prop="fans">
        <el-input v-model="addForm.fans" />
      </el-form-item>
</el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
          </span>
        </el-dialog>


</div>
    
    

</template>

<script>
import router from '@/router'
  export default {
    components: { },
     data() {
       return {
          value: false,
          userInfo:[],//保存用户信息
          editDialogVisible:false,
          addDialogVisible:false,
          addForm:{
            uname:'',
            upwd:'',
            Attention:'',
            fans:''
          },
          // 查询到的用户信息对象
          editForm:{},
        editFormRules: {
           uname:[
          {required:true,message:'用户名为必填项',trigger:'blur'},
          {min:3,max:15,message:'长度:3~15',trigger:'blur'}
        ],
        upwd:[
          {required:true,message:'密码必填',trigger:'blur'},
          {pattern:/^\d{6}$/,message:'必须是6位数字',trigger:'blur'}
        ],
        }
        }
     },
    mounted () {
        this.getData()
    },
    
    methods: {
      getData(){
        this.$http.get(`/user`).then(res=>{
          console.log(res);
          this.userInfo=res.data
        })
      },
      // 展示编辑用户的对话框
       async showEditDialog(id) {
        console.log("id:"+id);
         const {data:res}=await this.$http.get(`/user/self?uid=${id}`)
         console.log("res:",res);
        if(res.code!==200){
          return this.$message.error('查询用户信息失败')
        }
        this.editForm=res.result[0]
        console.log(this.editForm);
        console.log("uid:"+this.editForm.uid);
        this.editDialogVisible=true
      },
     
       // 监听修改用户对话框的关闭事件
      editDialogClosed(){
        this.$refs.editFormRef.resetFields
      },
      
      // 修改用户信息并提交
      editUserInfo(){
        console.log(this.editForm,'12312312');
        this.$refs.editFormRef.validate(async valid=>{
          if(!valid) return
        
          const {data: res} = await this.$http.put('/user/edit', {
           uid:this.editForm.uid,
           uname: this.editForm.uname,
            upwd: this.editForm.upwd
          })
          console.log(res,'123123');
          // 怎么判断?///////////////////////////////////////////////
          if(res.code!==200){
            return this.$message.error('修改失败!')
          }
          // 关闭对话框
          this.editDialogVisible=false
          // 刷新数据列表
          this.getData()
          // 提示修改成功
          this.$message.success('更新用户信息成功!')
        })
      },

       // 展示新增用户的对话框
       async addDialog() {
        // console.log("id:"+id);
        //  const {data:res}=await this.$http.get(`/user/self?uid=${id}`)
        //  console.log("res:",res);
        // if(res.code!==200){
        //   return this.$message.error('查询用户信息失败')
        // }
        // this.editForm=res.result[0]
        // console.log(this.editForm);
        // console.log("uid:"+this.editForm.uid);
        this.addDialogVisible=true
      },
      // 监听新增用户对话框的关闭事件
      addDialogClosed(){
        this.$refs.addFormRef.resetFields
      },


      // 点击按钮,添加用户
      addUser(){
        
        this.$refs.addFormRef.validate(async valid=>{
          console.log(valid);
          if(!valid) return
          const {data : res}=await this.$http.post('/user/add',this.addForm)
          if(res.code!=200){
            return this.$message.error('添加用户失败!')
          }
          this.$message.success('添加用户成功!')
          this.addDialogVisible=false
          this.getData()
        })
      },
        
    
        deleteRow(id) {
          console.log('正在删除:'+id,typeof id );
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {//点击确定时执行
            this.$http.delete(`/user/del?uid=${id}`).then(res=>{
                console.log(res);
              })
              this.userInfo.splice(id,1)
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            }).catch(() => {//点击取消按钮,执行
              this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
          
        }, 
        
        


      }
}
     
   

</script>

<style lang="scss" scoped>
.page{
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>